<template>
  <div class="home">
    <!-- 头部 -->
    <div class="header">
      <h3 class="title">银行信息管理</h3>
      <!-- 注销 -->
      <el-dropdown>
        <span class="el-dropdown-link">
          当前用户：{{ username }}
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-button
            :plain="true"
            style="border: none; width: 70px; height: 35px;"
            @click="exit()"
          >退出</el-button>
        </el-dropdown-menu>
      </el-dropdown>
      <!-- 消息列表 -->
      <el-tooltip class="item" effect="dark" :content="content" placement="bottom-end">
        <el-badge :value="messageNum" class="item">
          <el-button @click="drawer = true" icon="el-icon-message-solid"></el-button>
        </el-badge>
      </el-tooltip>
      <el-drawer
        title="待办事宜"
        :modal="false"
        :visible.sync="drawer"
        :before-close="handleClose"
        v-loading="fullscreenLoading"
      >
        <div
          class="drawer-item"
          v-for="(item,index) in messageList"
          :key="index"
          @click="deleteMessage(item)"
          :class="item.isCheck == 1?'drawer-active':''"
        >
          <div class="item-left">
            <el-button icon="el-icon-document"></el-button>
          </div>
          <el-badge :value="item.isCheck == 1?'':'new'" class="item2">
            <div class="item-right">
              <div class="content">{{item.content}}</div>
              <div class="date">{{item.messageTime}}</div>
            </div>
          </el-badge>
        </div>
        <div class="null" v-if="this.messageNum == null">(暂时没有消息待处理)</div>
      </el-drawer>
    </div>
    <div class="content">
      <div class="content-left">
        <!-- 左边菜单 -->
        <el-menu
          default-active="1"
          class="el-menu-vertical-demo"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#5dd5c8"
        >
          <el-menu-item index="1" @click="tabchange(1)">
            <i class="el-icon-user"></i>
            <span slot="title">客户信息查看</span>
          </el-menu-item>
          <el-menu-item index="2" @click="tabchange(2)">
            <i class="el-icon-tickets"></i>
            <span slot="title">客户办理记录</span>
          </el-menu-item>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-setting"></i>
              <span>操作</span>
            </template>
            <el-menu-item index="4" @click="tabchange(4)">添加客户信息</el-menu-item>
            <el-menu-item index="5" @click="tabchange(5)">添加客户办理记录</el-menu-item>
          </el-submenu>
        </el-menu>
      </div>
      <!-- 右边客户信息列表 -->
      <div class="content-right" v-if="tabIndex == 1">
        <div class="searchBtn" style="display: flex">
          <el-input v-model="search" size="big" placeholder="输入客户名称" />
          <el-button
            size="small"
            icon="el-icon-search"
            style="height: 40px"
            @click="getcustomerList()"
          ></el-button>
        </div>
        <el-table :data="customerList" style="width: 100%" stripe v-loading="loading">
          <el-table-column label="客户姓名" prop="name"></el-table-column>
          <el-table-column label="性别" prop="sex"></el-table-column>
          <el-table-column label="联系电话" prop="phone"></el-table-column>
          <el-table-column label="邮箱" prop="email"></el-table-column>
          <el-table-column label="储蓄卡卡号" prop="count"></el-table-column>
          <el-table-column align="right">
            <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-edit" @click="updateCustomer(scope.row)">编辑</el-button>
              <el-button type="danger" icon="el-icon-delete" @click="deleteCustomer(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-dialog
          :visible.sync="dialogVisible"
          width="50%"
          @close="clearComp()"
        >
          <update-customer
            v-if="showComp"
            :item="customerDetail"
            :clearComp="clearComp"
          ></update-customer>
        </el-dialog>

        <el-pagination
          @current-change="getcustomerList"
          :current-page.sync="pageNo_customer"
          :page-size="pageSize"
          :total="total_customer"
          layout="total, prev, pager, next"
        ></el-pagination>
      </div>
      <!-- 客户办理记录 -->
      <div class="content-right" v-if="tabIndex == 2">
        <div class="searchBtn" style="display: flex">
          <el-input v-model="search2" size="big" placeholder="请输入业务类型" />
          <el-button
            size="small"
            icon="el-icon-search"
            style="height: 40px"
            @click="getbusinessList()"
          ></el-button>
        </div>
        <el-table :data="recordList" style="width: 100%" stripe v-loading="loading">
          <el-table-column label="办理日期" prop="createTime"></el-table-column>
          <el-table-column label="用户" prop="name"></el-table-column>
          <el-table-column label="联系电话" prop="phone"></el-table-column>
          <el-table-column label="邮箱" prop="email"></el-table-column>
          <el-table-column label="业务类型" prop="type"></el-table-column>
          <el-table-column align="right">
            <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-edit" @click="updateBusiness(scope.row)">编辑</el-button>
              <el-button type="danger" icon="el-icon-delete" @click="deleteBusiness(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-dialog
          :visible.sync="dialogVisible"
          width="50%"
          @close="clearComp()"
        >
          <update-business
            v-if="showComp"
            :item="businessDetail"
            :clearComp="clearComp"
          ></update-business>

        </el-dialog>
        <el-pagination
          @current-change="getbusinessList"
          :current-page.sync="pageNo_business"
          :page-size="pageSize"
          :total="total_business"
          layout="total, prev, pager, next"
        ></el-pagination>
      </div>
      <!-- 右边添加客户信息 -->
      <div class="content-right" v-if="tabIndex == 4">
        <add-customer></add-customer>
      </div>
      <!-- 右边添加客户办理记录 -->
      <div class="content-right" v-if="tabIndex == 5">
        <add-record></add-record>
      </div>
    </div>
  </div>
</template>

<script>
import userRequest from "../request/index"; //引入请求接口
import addCustomer from "../components/addCustomer"; //引入添加客户的子组件
import addRecord from "../components/addRecord"; //引入添加业务记录的子组件
import updateCustomer from "../components/updateCustomer.vue";
import updateBusiness from "../components/updateBusiness.vue";
import cookie from "js-cookie"; //引入cookie获取token验证
export default {
  data() {
    return {
      dialogVisible: false, //编辑框开关
      showComp: true, //子组件的开关
      userinfo: null, // 用户信息
      username: "", //用户名
      tabIndex: "1", //tab下标
      search: "", //搜索框输入值
      search2: "", //搜索框输入值
      customerList: [], //客户列表
      customerDetail: [],
      recordList: [], //客户办理记录列表
      messageList: [], //消息列表
      pageNo_customer: 1, //客户列表页码
      pageNo_business: 1, //业务列表页码
      total_customer: null, //客户列表数量
      total_business: null, //业务列表数量
      businessDetail: [],
      pageSize: 5, //每页条数
      drawer: false, //消息弹窗控制
      messageNum: null, //消息条数
      content: "", //消息提示内容
      loading: true, //加载状态控制
      fullscreenLoading: false //加载状态开关
    };
  },
  // 子组件注册
  components: {
    updateBusiness,
    updateCustomer,
    addCustomer, //新增客户记录
    addRecord, //新增业务记录
  },
  methods: {
      // 关闭对话框
    clearComp() {
      this.dialogVisible = false;
      this.showComp = false;
    },

    // 点击编辑客户信息
    updateCustomer(item) {
      this.dialogVisible = true;
      this.showComp = true;
      this.customerDetail = item;
    },

    // 点击编辑办理业务信息
    updateBusiness(item) {
      this.dialogVisible = true;
      this.showComp = true;
      this.businessDetail = item;
    },

    // 菜单切换
    tabchange(index) {
      this.tabIndex = index; //主要是将tabIndex变活 只要点击就变化
      this.getcustomerList(); //切换时请求数据，为了实时更新
      this.getbusinessList(); //切换时请求数据，为了实时更新
      this.loading = true; //每次切换都要让加载开关打开
    },

    // 退出登录
    exit() {
      window.localStorage.removeItem("userinfo"); //删除用户信息
      cookie.remove("satoken"); //删除token
      this.$router.push({ path: "/" }); //跳到登录
      this.$message.success("注销成功!");
    },

    // 消息窗口关闭
    handleClose() {
      this.drawer = false;
    },

    // 删除客户信息
    deleteCustomer(item) {
      // 只是多一步确认
      this.$confirm("确定删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          // 调用删除接口
          userRequest.deleteCustomer(item.id).then(res => {
            // 如果成功将执行的内容
            if (res.data.code == 200) {
              this.$message.success("删除成功");
              this.getcustomerList(); //每次删除后都要重新请求更新数据
            }
          });
        })
        .catch(() => {});
    },
    // 删除客户业务信息(同上)
    deleteBusiness(item) {
      this.$confirm("确定删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          userRequest.deleteBusiness(item.id).then(res => {
            if (res.data.code == 200) {
              this.$message.success("删除成功");
              this.getbusinessList();
            }
          });
        })
        .catch(() => {});
    },
    // 处理新消息
    deleteMessage(item) {
      this.fullscreenLoading = true; //点击新消息先打开加载状态
      //setTimeout是一个延时器  里面的操作是等待一段时间后执行的
      setTimeout(() => {
        this.fullscreenLoading = false;
        userRequest.lookMessage(item.id).then(res => {
          if (res.data.code == 200) {
            this.getmessage();
          }
        });
      }, 600);
    },

    // 获取客户列表
    getcustomerList(page = 1) {
      this.pageNo = page; //默认展示第一页
      userRequest //调用客户列表的接口
        .getcustomerList({
          pageNo: this.pageNo, //对应好需要传入的页码
          pageSize: this.pageSize, //对应好需要传入的页码
          name: this.search //根据客户名称来执行搜索
        })
        .then(res => {
          // 如果成功将执行的内容
          if (res.data.code === 200) {
            const result = res.data.result; //res.data.result为后台返回的数据 把它用result装起来
            this.total_customer = result.total; //接收客户数量
            this.customerList = result.result; //接受客户列表
            setTimeout(() => {
              this.loading = false;
            }, 500);
          }
        });
    },
    // 获取客户业务列表(同上)
    getbusinessList(page = 1) {
      this.pageNo = page;
      userRequest
        .getbusinessList({
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          type: this.search
        })
        .then(res => {
          if (res.data.code === 200) {
            const result = res.data.result;
            this.total_business = result.total;
            this.recordList = result.result;
            setTimeout(() => {
              this.loading = false;
            }, 500);
          }
        });
    },

    // 获取提示消息(同上)
    getmessage() {
      userRequest.getMessage({}).then(res => {
        if (res.data.code === 200) {
          const result = res.data.result;
          this.messageList = result;
          // messageNum为待处理消息的数量 下面的操作是用它判断消息数字标识的变化（显示，隐藏，数字变化）
          for (var i = 0; i < result.length; i++) {
            if (result[i].isCheck == "0") this.messageNum = this.messageNum + 1;
          }
          if (this.messageNum !== 0 && this.messageNum != null) {
            this.content = `您有${this.messageNum}条新消息待处理`;
          } else {
            this.messageNum = null;
            this.content = "暂时没有新消息";
          }
        }
      });
    }
  },

  created() {
    // 获取本地用户信息
    this.userinfo = JSON.parse(window.localStorage.getItem("userinfo"));

    if (
      this.userinfo == null ||
      this.userinfo == "" ||
      this.userinfo.type != "user"
    ) {
      // 如果没有用户信息就进不来此页面
      window.localStorage.removeItem("userinfo");
      cookie.remove("satoken");
      this.$router.push({ path: "/" });
      this.$notify({
        title: "需要登录才能访问哦",
        type: "warning"
      });
    } else {
      //如果有用户信息 就取出用户名 放在页面头部展示
      this.username = this.userinfo.userName;
    }
    // 页面加载时请求数据
    this.getcustomerList();
    this.getbusinessList();
    this.getmessage();
  }
};
</script>

<style lang="scss" scoped>
@import "../css/Home.scss";
.item {
  margin: 25px 100px 0 0;
}
</style>
